<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .father{
            width: 500px;
            height: 500px;
            background-color: gold;
            margin: 100px auto;

            /* 这一行代码不再是相对定位，是设置参考点 */
            position: relative;
        }
        .son1{
            width: 200px;
            height: 200px;
            background-color: skyblue;

            /* 绝对定位 */
            position: absolute;
            top: 50px;
            left: 50px;
            z-index: 100;
        }
        .son2{
            width: 200px;
            height: 200px;
            background-color: pink;

            /* 绝对定位 */
            position: absolute;
            top: 80px;
            left: 80px;
            z-index: 80;
        }
        .son3{
            width: 200px;
            height: 200px;
            background-color: aqua;

            /* 绝对定位 */
            position: absolute;
            top: 110px;
            left: 110px;
            z-index: 50;
        }
    </style>
</head>
<body>
    <!-- 
        绝对定位：
            1）完全脱标
            2）需要通过 left  right top  bottom 设置偏移量   要么使用一个，要么使用二个
            3）参考点 需要我们后动设置  如果不设置，最终以body作为参考点
            4）设置参考点：position:relative;  position:fixed;  position:absolute;
            5）大部分情况下，设置参考点是通过 position:relative;
            6）大部分情况下，会把参考点设置到父元素上，子绝父相
            7）通过z-index可以改变层叠顺序 值越大，越靠前
     -->

     <div class="father">
         <div class="son1">son1</div>
         <div class="son2">son2</div>
         <div class="son3">son3</div>
     </div>
</body>
</html>